<template>
  <div class="pie-chart-container">
    <div class="chart-header">
      <h3>专业分布</h3>
      <el-select v-model="chartType" size="small" style="width: 180px">
        <el-option label="专业大类" value="level1" />
        <el-option label="专业类" value="level2" />
      </el-select>
    </div>
    <CommonChart :options="chartOptions" height="calc(100% - 40px)" />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue"
import { CommonChart } from "./index"
import type { EChartsOption } from "echarts"

const chartType = ref("level1")

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    right: 10,
    top: "center",
    type: "scroll"
  },
  series: [
    {
      name: "专业分布",
      type: "pie",
      radius: ["40%", "70%"],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: "bold"
        }
      },
      data: [
        { value: 1048, name: "工学" },
        { value: 735, name: "理学" },
        { value: 580, name: "文学" },
        { value: 484, name: "经济学" },
        { value: 300, name: "管理学" }
      ]
    }
  ]
}))
</script>

<style lang="scss" scoped>
.pie-chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-header {
    @include flex-between;
    margin-bottom: 10px;

    h3 {
      font-size: 16px;
      font-weight: normal;
    }
  }
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>
